<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="box">
   <form id="loginForm" ref="loginForm">
        用户名：<input type="text"      id="uname" />
        密码：<input   type="password"  id="pwd" />
       <button type="button" @click="login">登录</button>
<!--       有这个一个需求，没有给者两个输入框做绑定，但是要获取它们的值-->
<!--       获取js的原生对象，js代码-->
   </form>
</div>

<!--引入vue的js文件-->
<script src="js/vue.2.7.14.js"></script>

<script>

// vue获取js对象
    new Vue({
        el:'#box',
        methods:{
            login() {

                //
                let from = document.getElementById("loginForm");

                // 获取js原生form对象
                let f = this.$refs['loginForm']
                let v1 = f.firstElementChild.value // 获取第一个子元素的值
                let v2 = f.firstElementChild.nextElementSibling.value
                console.log(v1 , v2)
            }
        }
    });

</script>

</body>
</html>